<template lang="html">
  <div class="helper">
    <span class="left">2 items in left</span>
    <span class="tabs">
      <span
      v-for="state in states"
      :key="state"
      :class="[state,filter === state ? 'active-':'']"
      @click="toggleFilter(state)"
      >
        {{state}}
      </span>
    </span>
    <span class="clear" @click="clearALLCompleted">Clear completed</span>
  </div>
</template>

<script>
export default {
  props:{
    filter:{
      type:String,
      required:true,
    }

  },
  data(){
    return {
      states:['all','active','completed']
    }
  },
  methods:{
    clearALLCompleted(){},
    toggleFilter(){},
  }
}
</script>

<style lang="css">
.helper{
  margin-top: 20px;
  height: 40px;
}
.left{
  float: left;


  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.active{
  float: left;
  margin-left: 50px;
  background-color: #ddd;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.completed{
  float: left;
  margin-left: 50px;
  background-color: #ddd;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.clear{
  float: right;
  background-color: #ddd;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.all{
  float: left;
  margin-left: 50px;
  background-color: #ddd;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
.active-{
  border: 1px solid #999;
  box-sizing: border-box;
  color: #333;
}
</style>
